<template>
    <div class="cookHome">
        <!-- 头部导航 -->
        <van-tabs v-model="select" :sticky='true' :offset-top="54">
        <van-tab title="收藏">
           <van-grid :border="false" :column-num="2" :gutter="1">
                <van-grid-item v-for="i in 10" :key="i">
                    <van-image class="collect" src="/cook_img/001.jpg" />
                    <div class="collect_card">
                        <span>鲜到爆的花甲粉丝煲</span>
                        <van-rate class="collect_grade" v-model="value" :size="10" color="#ffd21e" void-icon="star" void-color="#eee"/>
                        <span>219人做过</span>
                        <div class="author">
                            <van-image class="author_img" round src="https://img01.yzcdn.cn/vant/cat.jpeg" width="20px" height="20px"></van-image>
                            <span>坐上来自己动</span>
                        </div>
                    </div>
                </van-grid-item>
            </van-grid>
        </van-tab>
        <van-tab title="推荐">
            <book-list></book-list>
        </van-tab>
        <van-tab title="分类">
            <div class="center" style="margin-bottom:50px;">
               <div class="lei clearfix" v-for="(p,i)  of categorys" @click='toBook(i)' :key="i">
                    <div v-show='i==0' class="main clearfix">
                    <div><span>{{c[list2[0].cid-1]}}</span><a href="#">换一换</a></div><br>
                        <div class="item">
                           <div class="img" :style="`background-image: url(/cook_img/${list2[0].pic})`" ></div>
                            <p>{{list2[0].describe}}</p>
                        </div>
                        <div class="item">
                           <div class="img" :style="`background-image: url(/cook_img/${list2[1].pic})`" ></div>
                            <p>{{list2[1].describe}}</p>
                        </div>
                        <div class="item">
                           <div class="img" :style="`background-image: url(/cook_img/${list2[2].pic})`" ></div>
                            <p>{{list2[2].describe}}</p>
                        </div>
                    </div>
                    <div v-show='i==1' class="main clearfix">
                        <div><span>{{c[list1[0].cid-1]}}</span><a href="#">换一换</a></div><br>
                        <div class="item">
                           <div class="img" :style="`background-image: url(/cook_img/${list1[0].pic})`" ></div>
                            <p>{{list1[0].describe}}</p>
                        </div>
                        <div class="item">
                           <div class="img" :style="`background-image: url(/cook_img/${list1[1].pic})`" ></div>
                            <p>{{list1[1].describe}}</p>
                        </div>
                        <div class="item">
                           <div class="img" :style="`background-image: url(/cook_img/${list1[2].pic})`" ></div>
                            <p>{{list1[2].describe}}</p>
                        </div>
                    </div>
                    <div v-show='i==2' class="main clearfix">
                        <div><span>{{c[list5[0].cid-1]}}</span><a href="#">换一换</a></div><br>
                        <div class="item">
                           <div class="img" :style="`background-image: url(/cook_img/${list5[0].pic})`" ></div>
                            <p>{{list5[0].describe}}</p>
                        </div>
                        <div class="item">
                           <div class="img" :style="`background-image: url(/cook_img/${list5[1].pic})`" ></div>
                            <p>{{list5[1].describe}}</p>
                        </div>
                        <div class="item">
                           <div class="img" :style="`background-image: url(/cook_img/${list5[2].pic})`" ></div>
                            <p>{{list5[2].describe}}</p>
                        </div>
                    </div>
                    <div v-show='i==3' class="main clearfix">
                        <div><span>{{c[list4[0].cid-1]}}</span><a href="#">换一换</a></div><br>
                        <div class="item">
                           <div class="img" :style="`background-image: url(/cook_img/${list4[0].pic})`" ></div>
                            <p>{{list4[0].describe}}</p>
                        </div>
                        <div class="item">
                           <div class="img" :style="`background-image: url(/cook_img/${list4[1].pic})`" ></div>
                            <p>{{list4[1].describe}}</p>
                        </div>
                        <div class="item">
                           <div class="img" :style="`background-image: url(/cook_img/${list4[2].pic})`" ></div>
                            <p>{{list4[2].describe}}</p>
                        </div>
                    </div>
                    <div v-show='i==4' class="main clearfix">
                            <div><span>{{c[list3[0].cid-1]}}</span><a href="#">换一换</a></div><br>
                        <div class="item">
                           <div class="img" :style="`background-image: url(/cook_img/${list3[0].pic})`" ></div>
                            <p>{{list3[0].describe}}</p>
                        </div>
                        <div class="item">
                           <div class="img" :style="`background-image: url(/cook_img/${list3[1].pic})`" ></div>
                            <p>{{list3[1].describe}}</p>
                        </div>
                        <div class="item">
                           <div class="img" :style="`background-image: url(/cook_img/${list3[2].pic})`" ></div>
                            <p>{{list3[2].describe}}</p>
                        </div>
                    </div>
                    <div v-show='i==5' class="main clearfix">
                        <div><span>{{c[list6[0].cid-1]}}</span><a href="#">换一换</a></div><br>
                        <div class="item">
                           <div class="img" :style="`background-image: url(/cook_img/${list6[0].pic})`" ></div>
                            <p>{{list6[0].describe}}</p>
                        </div>
                        <div class="item">
                           <div class="img" :style="`background-image: url(/cook_img/${list6[1].pic})`" ></div>
                            <p>{{list6[1].describe}}</p>
                        </div>
                        <div class="item">
                           <div class="img" :style="`background-image: url(/cook_img/${list6[2].pic})`" ></div>
                            <p>{{list6[2].describe}}</p>
                        </div>
                    </div>
               </div>
            </div>
        </van-tab>
        </van-tabs>

    </div>
</template>
<script>
import Book_list from '../components/Book_list.vue';
export default {
  components: { Book_list },
      data() {
    return {
        select:1,
      value: 3,
      categorys:[],
    //   categoryslist:[],
      list1:[[],[],[]],
      list2:[[],[],[]],
      list3:[[],[],[]],
      list4:[[],[],[]],
      list5:[[],[],[]],
      list6:[[],[],[]],
      c:['蔬菜','荤菜','主食','海鲜','养生','烘焙']
    };
  },
  methods: {
      toBook(i){
          this.$router.push(`/cookBook?bid=${i}`)
      }
  },
  mounted() {
      this.axios.get('/cookBook/category').then(res=>{
          this.categorys = res.data.data;
        //   console.log(res.data.data);
      }).then(()=>{
          var k =0;
          for(var i=0 ;i<this.categorys.length;i++){
            this.axios.get(`/cookBook/categorylist?cid=${i+1}`).then(res=>{
                // console.log(res.data.data);
                if(k==0){
                    this.list1=res.data.data;
 
                    k++;
                }else if(k==1){
                    this.list2=res.data.data;

                    k++;
                }else if(k==2){
                    this.list3=res.data.data;

                    k++;
                }else if(k==3){
                    this.list4=res.data.data;

                    k++;
                }else if(k==4){
                    this.list5=res.data.data;
  
                    k++;
                }else if(k==5){
                    this.list6=res.data.data;

                }
            //    this.categoryslist.push(res.data.data);
            //     console.log(this.categoryslist[0][1]);
            })
          }
      })
  },

  
}
</script>
<style>
.cookHome .item .img{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 140px;
    height: 80px;
    
}
.cookHome .center p{
    margin: 0;
    font-size: 12px;
    text-align: left;
    line-height: 1.6;
    width: 90%;
}
.cookHome .lei{
    width: 90%;
    margin: 10px auto;
    background-color: white;
    border-radius: 8px;
}
.cookHome .lei .main{
   margin: 0 auto;
}
.cookHome .lei span{
    margin-left: 5px;
    font-size: 14px
}
.cookHome .lei a{
    text-decoration: none;
    color: #9a9a9a;
    float: right;
    margin-right: 18px;
    font-size: 12px;
}
.cookHome .item{
    width: 33%;
    height: 120px;
    text-align: center;
    float: left;
    overflow : hidden;
    text-overflow : ellipsis;
    display : -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-bottom: 5px;
}
.cookHome .center img{
    width: 90%;
}
.clearfix::after{
    content: '';
    display: block;
    height: 0;
    clear: both;
}
.cookHome .collect img {
    border-radius: 8px;
}
.cookHome .collect_card>span:nth-child(1) {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
}
.cookHome .collect_card>span:nth-child(3) {
    font-size: 8px;
    font-weight: 500;
    margin-bottom: 5px;
    text-align: center;
}
.cookHome .collect_card {
    margin: 5px 0;
}
.cookHome .collect_grade {
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.cookHome .author_img {
  vertical-align: middle;
  margin-right: 5px;
}
.cookHome .author span {
    font-size: 10px;
    color: #656565;
    padding: auto;
}
.cookHome .van-grid-item__content {
    padding: 5px;
}
.cookHome .author {
    padding: 0;
}
</style>